<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scoed css Variables and js</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<h2>Update css Variables with <span class="h1">js</span></h2>
<div class="controls">
    <lable lon="spacing">Spacing:</lable>
    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <lable lon="blur">Blur:</lable>
    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
    <lable long="base">base Color</lable>
    <input type="color" name="base" value="#ffc600" >
</div>
<img src="https://picsum.photos/800/500" alt="">

<script src="index.js"></script>
</body>
</html>
